<template>
  <BaseCharts :options="options"
              autoRander
              :autoNumber="autoNumber"></BaseCharts>
</template>

<script setup>
import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { watch, ref } from "vue";
import { getChartTootipFormatter } from "@/utils/formatter.js";
import { useEchart } from "@/hooks/useEchart.js";
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  // 图表数据
  chartData: { type: Array, default: () => [] },
  // 横坐标数据
  xAxisData: { type: Array, default: () => [] },
  // y轴配置项
  yAxisProps: { type: Object, default: () => [] },
  // 内边距
  grid: { type: Object, default: () => ({}) },
  // 标题配置项
  titleProps: { type: Object, default: () => ({}) },
  // 循环渲染
  autoRander: { type: Boolean, default: false },
  // 循环渲染间隔 单位S
  autoNumber: { type: Number, default: 60 },
  // 标题字号
  titleFontSize: { type: Number, default: 14 },
  // 系列名字号
  labelFontSize: { type: Number, default: 14 },
  // 系列名内边距
  labelPadding: { type: Array, default: () => [0, 0, fontSize(15), 10] },
  // 系列名名称内边距
  labelNamePadding: { type: Array, default: () => [0, 0, 0, fontSize(20)] },
  // 值字号
  valueFontSize: { type: Number, default: 28 },
  // 值内边距
  valuePadding: { type: Array, default: () => [0, 10, fontSize(15), 0] },
  // 图标宽度
  iconWidth: { type: Number, default: 24 },
  // 图标高度
  iconHeight: { type: Number, default: 12 },
  // 柱子宽度
  barWidth: { type: Number, default: 12 },
  // 滚动条样式
  dataZoom: { type: Object, default: () => ({}) },
  // label高度
  labelHeight: { type: Number, default: 24 },
});

const fontColor = "rgba(255,255,255, 0.5)";
const options = ref({});
// 使用hooks
useEchart(getOptions);

watch(
  () => props.chartData,
  () => {
    getOptions();
  },
  { deep: true }
);

function getOptions () {
  options.value = {
    animation: false,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      // borderColor: "transparent",
      // backgroundColor: "#0d1635cc",
      borderColor: "#4895e899",
      extraCssText:
        "background: linear-gradient(180deg, #19406B, rgba(0, 134, 205, 0.91))", //渐变颜色
      formatter: (item) => {
        return getChartTootipFormatter(
          item,
          { itemKey: "name", valueKey: "value" },
          false
        );
      },
    },
    title: {
      textStyle: {
        color: "#fff",
        fontWeight: 400,
        // fontFamily: "PingFangSC-Medium",
        fontSize: fontSize(props.titleFontSize),
      },
      ...props.titleProps,
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: fontSize(140),
      containLabel: true,
      ...props.grid,
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        show: true,
        inverse: true,
        data: props.chartData.map((item) => item.name),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 0,
          align: "left",
          verticalAlign: "bottom",
          height: fontSize(props.labelHeight),
          lineHeight: fontSize(props.labelHeight),
          padding: props.labelPadding,
          formatter: (value) => {
            const index = props.chartData.findIndex(
              (item) => item.name === value
            );
            const newIndex =
              {
                0: "idx0",
                1: "idx1",
                2: "idx2",
              }[index] || "idx";
            return `{${newIndex}|${index + 1}} {name|${addThousandsSeparator(value)}}`;
          },
          rich: {
            idx0: {
              color: "#FFF",
              borderWidth: fontSize(0.5),
              borderColor: "#FFC100",
              borderType: "solid",
              width: fontSize(props.iconWidth),
              height: fontSize(props.iconHeight),
              fontSize: fontSize(8),
              align: "center",
              lineHeight: fontSize(props.iconHeight)
            },
            idx1: {
              color: "#FFF",
              borderWidth: fontSize(0.5),
              borderColor: "#FF7734",
              borderType: "solid",
              width: fontSize(props.iconWidth),
              height: fontSize(props.iconHeight),
              fontSize: fontSize(8),
              align: "center",
              lineHeight: fontSize(props.iconHeight)
            },
            idx2: {
              color: "#FFF",
              borderWidth: fontSize(0.5),
              borderColor: "#66E1DF",
              borderType: "solid",
              width: fontSize(props.iconWidth),
              height: fontSize(props.iconHeight),
              fontSize: fontSize(8),
              align: "center",
              lineHeight: fontSize(props.iconHeight)
            },
            idx: {
              color: "#FFF",
              borderWidth: fontSize(0.5),
              borderColor: "#fff",
              borderType: "solid",
              width: fontSize(props.iconWidth),
              height: fontSize(props.iconHeight),
              fontSize: fontSize(8),
              align: "center",
              lineHeight: fontSize(props.iconHeight)
            },
            name: {
              color: fontColor,
              fontSize: fontSize(props.labelFontSize),
              padding: props.labelNamePadding,
            },
          },
        },
      },
      {
        show: true,
        inverse: true,
        data: props.chartData.map((item) => item.value),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          padding: props.valuePadding,
          color: fontColor,
          align: "right",
          verticalAlign: "bottom",
          fontSize: fontSize(props.valueFontSize),
          formatter: (value) => {
            return `${value}\n`;
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(208, 222, 238, 0.1)",
        },
        yAxisIndex: 0,
        data: props.chartData.map((item) => item.value),
        barWidth: fontSize(props.barWidth),
        itemStyle: {
          color: "#2175DB",
        },
        label: {
          show: false,
        },
      },
    ],
    dataZoom: {
      show: false,
      width: 6,
      height: "100%",
      right: 0,
      showDetail: false,
      yAxisIndex: [0, 1, 2],
      startValue: 0,
      endValue: 4, // 可视窗口下显示的数量, 设置endValue值被当作数据的index取值
      borderWidth: 0,
      handleSize: 0,
      showDataShadow: false,
      brushSelect: false,
      rangeMode: "value",
      fillerColor: "rgba(255, 255, 255, 0.3)",
      backgroundColor: "#0000001a", //两边未选中的滑动条区域的颜色
      borderColor: "transparent",
      moveHandleSize: 0,
      zoomLock: true,
      handleStyle: {
        color: "#00000029",
        borderWidth: 0,
      },
      ...props.dataZoom,
    },
  };
}
</script>